<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8"/>
    <title><%= config.name %></title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/public/libs/bootstrap/css/bootstrap.min.css">

    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <link rel="stylesheet" href="/public/libs/bootstrap/css/bootstrap-theme.min.css">

    <link rel="stylesheet" href="/public/stylesheets/animate.min.css"/>

    <link href="/public/javascripts/viewer/viewer.css" rel="stylesheet">

    <link rel="stylesheet/less" type="text/css" href="/public/stylesheets/styles-bootcss.less">

    <script src="/public/javascripts/less.min.js"></script>

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="/public/javascripts/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/public/libs/bootstrap/js/bootstrap.min.js"></script>

    <script src="/public/javascripts/viewer/viewer.js"></script>

    <script>
        $(document).ready(function () {
            $('.images').viewer({
                title: false,
                navbar: false,
                url: 'data-original'
            });

            $('.btn-comment,.comment>.comment-list>li').click(function () {
                var $this = $(this);
                var tid = $this.closest('li').attr('data-topic');
                if (!tid) {
                    tid = $this.attr('data-tid');
                    $('#at-rid').val($this.attr('data-rid'));
                    $('#at-uid').val($this.attr('data-uid'));
                }
                $('#at-tid').val(tid);
                var user = $this.attr('data-user');
                var top = $this.offset().top - 60;
                $('.con-dialog').removeClass("hide").offset({
                    top: top
                });
                if (!$('.con-dialog').hasClass('hide')) {
                    var left = $('.con-dialog').width() / 2;
//                    $('.index-container').css('margin-left','100px');
                    $('.index-container').animate({
                        left: -left
                    }, 'fast');
                    $('.at-user').html(user);
                }
            });
            $('.comment-panel>.header>.close').click(function () {
                var left = $('.con-dialog').width() / 2;
                $('.con-dialog').addClass('hide');
                $('.index-container').animate({
                    left: 0
                }, 'fast');
                $('#at-tid').val('');
                $('#at-rid').val('');
                $('#at-uid').val('');
                $('#txtComment').text('');
            });
            $("#txtComment").keydown(function (event) {
                if (event.shiftKey && event.keyCode == 13) {

                } else if (event.keyCode == 13) {
                    var tid = $('#at-tid').val();
                    var rid = $('#at-rid').val();
                    var uid = $('#at-uid').val();
                    $.post('/' + tid + '/reply', {
                        tid: tid,
                        txt: $('#txtComment').html(),
                        rid: rid,
                        uid: uid
                    }, function (d) {
                        location.reload();
                    });
                    return false;
                }
            });

            $('.favorite').click(function (e) {
                var $this = $(this);
                var tid = $this.closest('li').attr('data-topic');
                $.ajax({
                    url: '/topic/' + tid + '/up',
                    method: 'POST',
                }).done(function (data) {
                    if (data.success) {
                        var currentCount = Number($this.next('.favorite-count').text().trim()) || 0;
                        if (data.action === 'up') {
                            $this.next('.favorite-count').text(currentCount + 1);
                            $this.addClass('favorited');
                        } else {
                            if (data.action === 'down') {
                                $this.next('.favorite-count').text(currentCount - 1);
                                $this.removeClass('favorited');
                            }
                        }
                    } else {
                        alert(data.message);
                    }
                }).fail(function (xhr) {
                    if (xhr.status === 403) {
                        alert('请先登录，登陆后即可点赞。');
                    }
                });
            });

        });
    </script>

    <script type='text/javascript'>
        var _vds = _vds || [];
        window._vds = _vds;
        (function(){
            _vds.push(['setAccountId', '8112bc7ff8250c70']);
            (function() {
                var vds = document.createElement('script');
                vds.type='text/javascript';
                vds.async = true;
                vds.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'dn-growing.qbox.me/vds.js';
                var s = document.getElementsByTagName('script')[0];
                s.parentNode.insertBefore(vds, s);
            })();
        })();
    </script>

    <script type="text/javascript">
        window.zhuge = window.zhuge || [];
        window.zhuge.methods = "_init debug identify track trackLink trackForm page".split(" ");
        window.zhuge.factory = function(b) {
            return function() {
                var a = Array.prototype.slice.call(arguments);
                a.unshift(b);
                window.zhuge.push(a);
                return window.zhuge;
            }
        };
        for (var i = 0; i < window.zhuge.methods.length; i++) {
            var key = window.zhuge.methods[i];
            window.zhuge[key] = window.zhuge.factory(key);
        }
        window.zhuge.load = function(b, x) {
            if (!document.getElementById("zhuge-js")) {
                var a = document.createElement("script");
                var verDate = new Date();
                var verStr = verDate.getFullYear().toString()
                        + verDate.getMonth().toString() + verDate.getDate().toString();

                a.type = "text/javascript";
                a.id = "zhuge-js";
                a.async = !0;
                a.src = (location.protocol == 'http:' ? "http://sdk.zhugeio.com/zhuge.min.js?v=" : 'https://zgsdk.zhugeio.com/zhuge.min.js?v=') + verStr;
                var c = document.getElementsByTagName("script")[0];
                c.parentNode.insertBefore(a, c);
                window.zhuge._init(b, x)
            }
        };
        window.zhuge.load('6042337a36ae4ef29eb5939efaeb91ee');
    </script>

    <script src="http://sdk.talkingdata.com/app/h5/v1?appid=BFB876EEF5E841C0B8A5DA3434B42670&vn=正式版v1.0&vc=v1.0"></script>

</head>

<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top ">
    <div class="container shufa-nav">
        <a class="navbar-brand" href="/"><strong><%= config.name %></strong></a>

        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/?tab=all">发现</a></li>
                <li><a href="/about">关于</a></li>
            </ul>
            <%if(currentUser){%>
            <div class="pull-right nav-container-right">
                <img class="img-user" src="<%= currentUser.avatar %>">
            </div>
            <div class="pull-right shufa-btn-login">
                <a href="/topic/create">发布</a>
            </div>
            <%}else{%>
            <div class="pull-right shufa-btn-login">
                <a href="/signin">登录</a>
            </div>
            <%}%>
        </div>
        <!--/.nav-collapse -->
    </div>
</nav>
<div class="container">
    <%if(currentUser){%>
    <div class="user-dialog pull-right hide">
        <div class="user-panel">
            <div class="triangle"></div>
            <div class="body">
                <div class="user-info">
                    <div class="profile"><img src="<%= currentUser.avatar %>"></div>
                    <p><span><%= currentUser.name %></span></p>

                    <p><span><%= currentUser.email %></span></p>
                </div>
                <hr/>
                <ul>
                    <li><a>我的作品</a></li>
                    <li><a href="/profile">账号设置</a></li>
                    <li><a>帮助中心</a></li>
                    <li><a href="/signout">退出登录</a></li>
                </ul>
            </div>
        </div>
    </div>
    <%}%>

    <div class="index-container">
        <div class="index-left">
            <div class="con-menu">
                <ul>
                    <% [['all', '全部']].concat(tabs).forEach(function (pair) {
                    var value = pair[0];
                    var text = pair[1]; %>
                    <li class=" <%= value === tab ? 'active' : '' %>"><a href="<%= value ? '/?tab=' + value : '/' %>"><%=
                        text %></a></li>
                    <% }) %>
                </ul>
            </div>
        </div>
        <div class="index-right">
            <div class="index-body">

                <div class="con-header ">
                    <div class="img-box">
                        <img class="content" src="/public/images/Rectangle.png">
                    </div>
                    <img class="user" src="/public/images/text.png"/>
                </div>
                <div class="con-content">
                    <ul>
                        <% topics.forEach(function(topic){ %>
                        <li class="con-item" data-topic="<%= topic._id %>">
                            <div class="item-user"><img src="<%= topic.author.avatar_url %>"></div>
                            <div class="item-content">
                                <h3 class="user"><a href="/user/<%= topic.author._id %>"><%= topic.author.name %></a></h3>
                                <div class="detail pull-right"><a href="/topic/<%= topic._id %>">查看详情</a></div>

                                <p class="text"><%- topic.content %></p>

                                <div class="images">
                                    <% if(topic.images && topic.images.length==1){
                                    var width = parseInt(topic.images[0].width);
                                    var height =parseInt(topic.images[0].height);
                                    %>
                                    <ul>
                                        <% if( width > height ){ %>
                                        <li class="img-box-1-horizontal">
                                            <img class="img-size-1-horizontal"
                                                 data-original="//<%= topic.images[0].url %>"
                                                 src="//<%= topic.images[0].url %>?imageView2/1/w/256/h/192">
                                        </li>
                                        <% }else{ %>
                                        <li class="img-box-1-vertical">
                                            <img class="img-size-1-vertical"
                                                 data-original="//<%= topic.images[0].url %>"
                                                 src="//<%= topic.images[0].url %>?imageView2/1/w/192/h/256">
                                        </li>
                                        <% } %>
                                    </ul>
                                    <% }else{ %>
                                    <ul class="clearfix img-box-x-p<%= topic.images.length %>">
                                        <% topic.images.forEach(function(image){ %>
                                        <li class="img-box-x">
                                            <img class="img-siez-x" data-original="//<%= image.url %>"
                                                 src="//<%= image.url %>?imageView2/1/w/128/h/128">
                                        </li>
                                        <% }) %>
                                    </ul>
                                    <% } %>
                                </div>
                                <% var isUped = topic.ups.indexOf(userId)>=0 ? "favorited":"" %>
                                <p class="more"><span class="favorite <%= isUped %>"></span>
                                    <font class="favorite-count"><%= topic.ups.length||0 %></font><span
                                            class="btn-comment"
                                            data-user="<%= topic.author.name %>"><img
                                            src="/public/images/more.png"></span></p>
                                <% if(topic.replies && topic.replies.length>0){%>
                                <div class="comment">
                                    <div class="triangle"></div>
                                    <% if(topic.ups && topic.ups.length>0){%>
                                    <div class="favorite-list">
                                        <span>共<strong><%=topic.ups.length%></strong>位池友赞了</span>
                                        <!--<% topic.ups.forEach(function(){%>-->
                                            <!--<span>令狐冲,阿紫</span>-->
                                        <!--<%})%>-->
                                    </div>
                                    <% } %>
                                    <ul class="comment-list">
                                        <% topic.replies.forEach(function(reply){ %>
                                        <li data-tid="<%= topic._id%>" data-rid="<%= reply._id%>"
                                            data-remove="<%=userId+''==reply.author._id+''%>"
                                            data-uid="<%= reply.author._id %>"
                                            data-user="<%= reply.author.name %>"><span><span class="author"><%= reply.author.name %></span><% if(reply.toAuthor){%>@<span
                                                class="author"><%= reply.toAuthor.name %></span><%}%> :</span> <span><%- reply.content %></span>
                                        </li>
                                        <%})%>
                                    </ul>
                                </div>
                                <% } %>
                            </div>
                        </li>
                        <% }) %>
                    </ul>
                </div>
            </div>
            <div class="con-dialog hide">
                <div class="comment-panel">
                    <div class="header">
                        <span><strong>评论</strong></span>
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="body">
                        <div class="triangle"></div>
                        <span>@<span class="at-user"></span></span>
                        <input type="hidden" id="at-tid">
                        <input type="hidden" id="at-type">
                        <input type="hidden" id="at-rid">
                        <input type="hidden" id="at-uid">

                        <div id="txtComment" name="note" class="input-adaptive" contenteditable="plaintext-only"
                             placeholder="按Enter发送，Shift+Enter换行"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>
<script type="text/javascript" src="/public/javascripts/pin/jquery.pin.min.js"></script>
<script>
    $(document).ready(function () {
        $('.img-user').click(function () {
            $('.user-dialog').toggleClass('hide');
        })
    });
</script>

<div style="display:none;">

    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?c6cc56a5c39125422b6c9cc0607294b5";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</div>
</body>
</html>